<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            width: 500px;
            border: 1px solid red;
            margin: 0 auto;
            margin-top: 10px;
            border-collapse: collapse;
        }

        table thead {
            background: skyblue;
        }

        table tbody {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>新增学员</h1>
    姓名<input type="text" class="uname">
    年龄<input type="text" class="age">
    性别<select name="gender" id="" class="gender">
        <option value="男">男</option>
        <option value="女">女</option>
    </select>
    薪资 <input type="text" class="salary">
    就业城市<select name="city" id="" class="city">
        <option value="厦门">厦门</option>
        <option value="福州">福州</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
    </select>
    <button class="add">录入</button>
    <table>
        <caption>就业榜</caption>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>薪资</th>
                <th>就业城市</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>1001</td>
                <td>欧阳霸天</td>
                <td>19</td>
                <td>男</td>
                <td>15000</td>
                <td>上海</td>
                <td>
                    <a href="JavaScript:;" >删除</a>
                </td>
            </tr> -->
        </tbody>

    </table>
    <script>
        function getLocaldata() {
            let data = localStorage.getItem('data')
            if (data) {
                return JSON.parse(localStorage.getItem('data'))
            } else {
                let arr = [
                    { stuID: 1001, uname: '欧阳霸天', age: 19, gender: '男', salary: '15000', city: '上海' },
                    { stuID: 1002, uname: '张三', age: 20, gender: '男', salary: '18000', city: '北京' },
                    { stuID: 1003, uname: '李四', age: 22, gender: '男', salary: '20000', city: '广州' },
                ]
                localStorage.setItem('data', JSON.stringify(arr))
            }
        }
        let tbody = document.querySelector('tbody')
        let btn = document.querySelector('.add')
        let uname = document.querySelector('.uname')
        let age = document.querySelector('.age')
        let gender = document.querySelector('.gender')
        let salary = document.querySelector('.salary')
        let city = document.querySelector('.city')


        // 渲染函数   把数组里面的数据渲染到页面中   
        function render() {

            let arr = getLocaldata()

            tbody.innerHTML = ''
            for (let i = 0; i < arr.length; i++) {
                let tr = document.createElement('tr')
                tr.innerHTML = `
                <td>${arr[i].stuID}</td>
                <td>${arr[i].uname}</td>
                <td>${arr[i].age}</td>
                <td>${arr[i].gender}</td>
                <td>${arr[i].salary}</td>
                <td>${arr[i].city}</td>
                <td>
                    <a  href="javascript:;" data-id=${i}>删除</a>
                </td>
            `
                tbody.appendChild(tr)
            }
        }

        btn.addEventListener('click', function () {
            let arr = getLocaldata()
            localStorage.setItem('data', JSON.stringify(arr))
            // console.log(uname.value);    
            arr.push(
                {
                    // 得到数组最后一条数的学号 1003+1
                    stuID: arr[arr.length - 1].stuID + 1,
                    uname: uname.value,
                    age: age.value,
                    gender: gender.value,
                    gender: gender.value,
                    salary: salary.value,
                    city: city.value
                }
            )
            localStorage.setItem('data', JSON.stringify(arr))
            render()
            // 复原所有的表单数据
            uname.value = uname.value = salary.value = ''
            gender.value = '男'
            city.value = '厦门'
        })
        render()

        // 删除数据，删除的也是数组里面的数据（事件委托）
        tbody.addEventListener('click', function (e) {
            let arr = getLocaldata()
            // console.log(e);
            // console.log(e.target);
            // tagName点击的标签名
            if (e.target.tagName === 'A') {
                // console.log(e.target.id);
                // arr.splice(e.target.id, 1)
                console.log(e.target.dataset.id);
            }

            localStorage.setItem('data', JSON.stringify(arr))

            render()
        })
    </script>
</body>

</html>